html, body
{
  height: 100%;
  margin: 0;
}

body
{
background: linear-gradient(145deg, #1c1c1c, #333);
color: #00ffff;
}

.header
{
	color: #00ffff;font-family: 'Yeon Sung';font-size: 45px;letter-spacing: 10px;margin-top: 80px;
}
.header img
{
	width: 80px;margin-left: -15px;
}

.login_div
{
background: linear-gradient(145deg, #1c1c1c, #333);
  color: #00ffff;
  box-shadow: 0 6px 16px rgba(0, 255, 255, 0.2);
  border: 2px solid #00ffff;
  border-radius: 15px;
  float: none;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-weight: bolder;
}

.logo
{
	width: 80px;margin-top: 30px;border-radius: 40px;
}

#login_button
{
	width: 80%;border-radius: 15px;
}
.buttonl{
	background: linear-gradient(145deg, #1c1c1c, #333);
  color: #00ffff;
  padding: 1rem 1.2rem;
  border: 2px solid #00ffff;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 16px rgba(0, 255, 255, 0.2);
}
.form-control{
	background: linear-gradient(145deg, #1c1c1c, #333);
  color: #00ffff;
  padding: 1rem 1.2rem;
  border: 2px solid #00ffff;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 16px rgba(0, 255, 255, 0.2);
}
.room_name
{
	cursor: pointer;
	font-size: 20px;
}


#logout
{
	font-size: 20px; float: right;
	background: linear-gradient(145deg, #1c1c1c, #333);
  color: #00ffff;
  border: 2px solid #00ffff;
  padding: 1rem 1.2rem;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 16px rgba(0, 255, 255, 0.2);
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


#output
{
	padding: 10px; width:80%;background: linear-gradient(145deg, #1c1c1c, #333);
  color: #00ffff;
  border: 2px solid #00ffff;
  padding: 1rem 1.2rem;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 16px rgba(0, 255, 255, 0.2);
}

.input_div_room_page
{
	width: 80%;
}

.input_div label
{
	color: #00ffff;font-size: 20px;
}


.input_div_message_page
{
	position: fixed;bottom: 0px;width: 100%;background: linear-gradient(145deg, #1c1c1c, #333);
  color: #00ffff;
  border: 2px solid #00ffff;
  padding: 1rem 1.2rem;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 16px rgba(0, 255, 255, 0.2);
}
.input_div_message_page label
{
	color: black;
}
.input_div_message_page #msg
{
	width: 80%;
}
.input_div_message_page button
{
	margin-top: 15px;
	width: 50%; 
}
.color_white
{
	color: #00ffff;
}

.user_tick
{
	width:20px;
}
.message_h4
{
	padding-left:5px;color:#00ffff;
}